<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="css/default.min.css" />
		
		<!-- JS -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/product.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/product.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 头部开始 -->
		<div id="head-div" >

		</div>
		<script>
			$("#head-div").load("head.html");
		</script>
		<!--头部结束-->
		<!-- //导航条结束 -->
		
		<!-- 商品分类&搜索表单部分 -->
		<section class="container">
		
			<!-- 商品分类部分 -->
			<div id="main-parent" >

			</div>
			<script>
				$("#main-parent").load("parent.html");
			</script>
			<!-- //商品分类部分结束 -->
		
			<!-- 搜索表单部分 -->
			<div id="serach-div" >

			</div>
			<script>
				$("#serach-div").load("serach.html");
			</script>
			<!-- //搜索表单部分结束 -->
		</section>
		<!-- //商品分类&搜索表单部分 -->

		<!-- 页面主体部分 -->
		<div class="container">

			<!-- 商品信息部分 -->
			<div class="row">
				<div class="col-md-5 col-lg-4">
					<img id="url" src="" class="img-thumbnail" />
				</div>
				<div class="col-md">
					<div class="product-detail">
						<div id="name" class="h4 mb-4"></div>
						<div class="line">编号:<span id="id"></span></div>
						<input type="hidden" name="pid" value="" form="form-shop">
						<div class="h4 line">
							<span class="text-danger small">￥</span>
							<span id="price" class="text-danger">1,398.00</span>
						</div>
						<div class="line">运费：包邮</div>
						<div class="line">库存：<span id="stock"></span></div>
						<div class="my-1">
							<span>数量：</span>
							<input name="count" type="number" form="form-shop" value="1" min="1" max="20" class="form-control form-control-sm count" required="required" />
						</div>
						<form id="form-shop" action="cart.html" class="mt-3">
							<button class="btn btn-lg btn-outline-secondary" type="submit">
								<span class="glyphicon-shopping-cart"></span>
								<span>立即购买</span>
							</button>
							<button id="shoppingCar" type="button" class="btn btn-lg btn-primary">
								<span class="glyphicon-shopping-cart"></span>
								<span>加入购物车</span>
							</button>
						</form>
					</div>
				</div>
			</div>
			<!-- //商品信息部分结束 -->
		</div>
		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<div id="footer-div">

		</div>
		<script>
			$("#footer-div").load("footer.html");
		</script>
		<!-- //页面脚部部分结束 -->
	</body>

</html>